<div class="container-fluid" style="height: 100%;overflow-x: hidden;margin-right: 0;margin-left: 0">
	<div class="clr-row limit-container">

		<div class="clr-col-lg-12">
			<div class="card info-card animate">
				<div class="clr-row flex-items-xs-around">
					<div class="clr-col-lg-4 clr-col-md-5 text-left">
						<h4 class="title card-title-color">Referendum &nbsp;
							<a role="doc-noteref" aria-haspopup="true" class="tooltip tooltip-lg tooltip-right">
								<fa-icon [icon]="['far','question-circle']" class="highlight-primary"
										 style="font-size: 16px;"></fa-icon>
								<span class="tooltip-content">For a proposal to pass, it needs to have 15% of tokens (around 150MM {{aService.activeChain['symbol']}}
									) voted on it and 10% more YES than NO need to be sustained for 30 days within a 120 day period.</span>
							</a>
						</h4>
						<h5 class="subtitle card-text-color mt-0">vote for proposals on the {{aService.activeChain['name']}}</h5>
					</div>
					<div class="clr-col-lg-3 clr-col-md-6 text-right offset-lg-1">
						<mat-form-field class="searchbar">
							<input type="text" matInput placeholder="Search..."
								   (input)="filterProposals($event.target['value'])">
							<fa-icon matSuffix [icon]="['far', 'search']" size="lg"></fa-icon>
						</mat-form-field>
					</div>
					<div class="clr-col-lg text-right">
						Filter by
						<mat-form-field class="filter-selector example-full-width" style="width: 207px;">
							<mat-select value="mosteos" (selectionChange)="sortingChange($event)">
								<mat-option value="mosteos" class="filter-option">
									Most {{aService.activeChain['symbol']}}
									voted
								</mat-option>
								<mat-option value="mostvoted" class="filter-option">Most voters</mat-option>
								<mat-option value="newest" class="filter-option">Newest First</mat-option>
								<mat-option value="oldest" class="filter-option">Oldest First</mat-option>
								<mat-option value="expiresfirst" class="filter-option">Expires First</mat-option>
								<mat-option value="expireslast" class="filter-option">Expires Last</mat-option>
							</mat-select>
						</mat-form-field>
					</div>
				</div>
			</div>

			<div class="card create-proposal-card animate" style="margin-bottom: 5px;">
				<div class="card-block" style="padding: 0;">
					<p-accordion class="create-proposal nohighlight-accordion">
						<p-accordionTab header="Create proposal">
							<form [formGroup]="createProposalForm">
								<div class="clr-row" style="padding-bottom: 15px;">
									<div class="clr-col-md-3">
										<mat-form-field class="field-width"
														style="margin-top: 12px; margin-bottom: 12px">
											<mat-label>Proposal ID</mat-label>
											<input #propID matInput type="text" formControlName="id"
												   placeholder="Short unique ID name" maxlength="12"
												   class="text-lowercase" [pattern]="'^(([a-z]|[1-5]|\.){0,12})$'">
											<span matPrefix>#&nbsp;</span>
											<mat-error align="start" *ngIf="errormsg !== ''">
												{{errormsg}}
											</mat-error>
											<mat-hint align="start">a-z and 1-5 only</mat-hint>
											<mat-hint align="end">{{propID.value.length}} / 12 max</mat-hint>
										</mat-form-field>
									</div>
									<div class="clr-col-md-9">
										<mat-form-field class="field-width"
														style="margin-top: 12px; margin-bottom: 12px; width: 90%;">
											<input #propTitle matInput type="text" formControlName="title"
												   placeholder="Proposal Title" maxlength="1024">
											<mat-error align="start" *ngIf="errormsg !== ''">
												{{errormsg}}
											</mat-error>
											<mat-hint align="end">{{propTitle.value.length}} / 1024 max</mat-hint>
										</mat-form-field>
									</div>
									<div class="clr-col-md-12 markdown-preview">
										<div class="clr-row" style="margin-top: 10px">
											<div class="clr-col-6">
												<mat-label style="font-family: Metropolis;">Proposal content
													(Markdown)
												</mat-label>
												<mat-form-field appearance="outline" class="textarea"
																style="margin-top: -3px; margin-bottom: 12px">
													<textarea matInput type="text" rows="20"
															  placeholder="Write your proposal using markdown"
															  formControlName="content">
													</textarea>
													<mat-error align="start" *ngIf="errormsg !== ''">
														{{errormsg}}
													</mat-error>
													<mat-hint align="start"><a style="cursor:pointer;"
																			   (click)="extOpen('https://guides.github.com/features/mastering-markdown/')">How
														to style using markdown</a></mat-hint>
												</mat-form-field>
											</div>
											<div class="clr-col-6">
												<mat-label style="font-family: Metropolis;">Preview</mat-label>
												<div
													style="border: 1px solid #a1a1a1;height: 336px; overflow-y: auto; border-radius: 5px;flex: 0 0 49%; padding: 1.48em .75em 0 .75em;">
													<markdown id="markdown" style="color: white;"
															  [data]="markdownData"></markdown>
												</div>
											</div>
										</div>
									</div>
									<div class="clr-col-lg-3">
										<mat-form-field class="field-width"
														style="margin-top: 12px; margin-bottom: 12px">
											<input matInput type="number" formControlName="expiry"
												   placeholder="Days until expiry" min="0" max="180">
											<mat-error align="start" *ngIf="errormsg !== ''">
												{{errormsg}}
											</mat-error>
											<mat-hint align="start">only numbers, between 1 and 180 days</mat-hint>
										</mat-form-field>
									</div>
									<div class="clr-col-lg-4">
										<mat-form-field class="example-full-width ref-type"
														style="width: 207px; margin-top: 12px;">
											<mat-select value="0" placeholder="Answer type" formControlName="type"
														(selectionChange)="showOptionsField($event.value)">
												<mat-option value="referendum-v1" class="ref-option filter-option">
													Referendum
												</mat-option>
												<mat-option value="poll-yn-v1" class="ref-option filter-option">Yes/No
													Poll
												</mat-option>
												<mat-option value="poll-yna-v1" class="ref-option filter-option">
													Yes/No/Abstain
													Poll
												</mat-option>
												<mat-option value="options-v1" class="ref-option filter-option">Options
													Poll
												</mat-option>
												<mat-option value="multi-select-v1" class="ref-option filter-option">
													Multi-Select
													Poll (Checkboxes)
												</mat-option>
											</mat-select>
										</mat-form-field>
									</div>
									<div class="clr-col-lg-3" [ngStyle]="{'display':showOptions}"
										 formArrayName="options">
										<button type="button" class="btn btn-info-outline btn-icon btn-sm"
												style="width: 34px;" (click)="addOptiont()">
											<fa-icon [icon]="['far', 'plus']"></fa-icon>
										</button>
										&nbsp;
										<button type="button" class="btn btn-danger-outline btn-icon btn-sm"
												style="width: 34px;" (click)="removeOption()">
											<fa-icon [icon]="['far', 'minus']"></fa-icon>
										</button>

										<div style="float:left;clear:both"
											 *ngFor="let option of options.controls; let i = index">
											<mat-form-field class="field-width"
															style="margin-top: 12px; margin-bottom: 12px">
												<input matInput [id]="i" type="text" [formControlName]="i"
													   [placeholder]="'Option - ' + (i+1)" value="">
												<mat-error align="start"
														   *ngIf="errormsg !== ''">{{errormsg}}</mat-error>
											</mat-form-field>
										</div>
									</div>
									<div class="clr-col-lg-2">
										<button type="button" class="btn btn-block btn-outline btn-info-outline"
												style="margin-top: 15px; padding:0px 17px !important;"
												(click)="createProposalForm.valid?(proposalModal=true):null"
												[disabled]="!createProposalForm.valid">
											Submit
										</button>
									</div>
								</div>
							</form>
						</p-accordionTab>
					</p-accordion>
				</div>
			</div>
		</div>

		<!--		<div class="clr-row" style="height: 100%; width:100%; opacity: 0.85" *ngIf="loading">-->
		<div class="clr-col-lg-12 text-center flex-column animate"
			 style="padding: 39px; align-items: center; width:100%; opacity: 0.85" *ngIf="loading">
			<ng-container>

				<fa-layers class="mt-2 mb-1">
					<fa-icon [icon]="['far', 'spinner']" [spin]="true" size="2x" style="color:#0094d2;"></fa-icon>
				</fa-layers>
				<br>

				<div style="color:#0094d2; padding-left: 17px; font-size: 18px; margin-top: 10px">LOADING...</div>
			</ng-container>
		</div>
		<!--		</div>-->

		<!--		<div class="clr-row animate">-->
		<ng-container *ngFor='let p of (proposals
			| fusejs: searchString :{
					"distance": 300,
					"threshold": 0.1,
					"tokenize": false,
					"minMatchCharLength": 1,
					"shouldSort": true,
					"keys": [
						{
							"name": "proposal.proposal_name",
							"weight": 0.8
						},
						{
							"name": "proposal.title",
							"weight": 0.7
						},
						{
							"name":"proposal.json_data.content",
							"weight": 0.4
						}
					]
				}
			| orderBy: sortExpression : sortReverse : true : comparatorMethod
			) | paginate: {itemsPerPage: 16,currentPage: page}'>
			<div class="clr-col-lg-6 animate">
				<div class="card proposal-card" (click)="openLargeView(p)">
					<div class="proposal-body">
							<span class="highlight-primary" style="font-weight: 500;"
								  [innerHTML]="'#' + p['fuseJsHighlighted']['proposal']['proposal_name']"></span>

						<span class="boxExpires {{ isExpired(p.proposal.expires_at) ? 'expired' : 'expires'}}">
										{{ getExpiretime(p.proposal.expires_at) }}!
									</span>
						<div style="clear: both;">
							<h4 class="highlight mt-0" pTooltip="Proposer: {{p.proposal.proposer}}">
								<div style="height: 100px"
									 [innerHTML]="p['fuseJsHighlighted'].proposal.title"></div>
							</h4>

							<ng-container *ngIf="p.proposal.json_data">
								<div class="card-text-color text-justify proposal-content"
									 [innerHTML]="p['fuseJsHighlighted'].proposal.json_data.content"></div>
							</ng-container>
						</div>
						<button
							*ngIf="(!isExpired(p.proposal.expires_at)) && ((p.proposal.json_data.type !== 'options-v1') && (p.proposal.json_data.type !== 'multi-select-v1'))"
							type="button" class="btn btn-outline btn-info-outline"
							(click)="startVote(p,0, $event);"
							style="margin-top: 15px; padding:0 17px !important;">
							0 - No
						</button>
						<button
							*ngIf="(!isExpired(p.proposal.expires_at)) && ((p.proposal.json_data.type !== 'options-v1') && (p.proposal.json_data.type !== 'multi-select-v1'))"
							type="button" class="btn btn-outline btn-info-outline"
							(click)="startVote(p,1, $event);"
							style="margin-top: 15px; padding:0 17px !important;">
							1 - Yes
						</button>
						<button
							*ngIf="(!isExpired(p.proposal.expires_at)) && (p.proposal.json_data.type==='poll-yna-v1')"
							type="button" class="btn btn-outline btn-info-outline"
							(click)="startVote(p,2, $event);"
							style="margin-top: 15px; padding:0 17px !important;">
							2 - Abstain
						</button>

						<div
							*ngIf="(!isExpired(p.proposal.expires_at)) && ((p.proposal.json_data.type==='options-v1') || (p.proposal.json_data.type==='multi-select-v1'))"
							style="float:left;">
							<mat-form-field class="example-full-width"
											style=" margin-right:10px;width: 207px;">
								<mat-select placeholder="Select an option"
											(selectionChange)="multiSelect(p,$event.value, $event)"
											[multiple]="p.proposal.json_data.type==='multi-select-v1'">
									<mat-option *ngFor="let option of p.proposal.json_data['options']"
												[value]="p.proposal.json_data['options'].indexOf(option)">
										{{p.proposal.json_data['options'].indexOf(option)}} - {{ option }}
									</mat-option>
								</mat-select>
							</mat-form-field>

							<button type="button" class="btn btn-outline btn-info-outline"
									(click)="startMultiVote(p, $event)"
									style="margin-top: 9px;  padding:0px 17px !important;">
								Vote
							</button>
						</div>

						<button *ngIf="!isExpired(p.proposal.expires_at)" type="button"
								class="btn btn-outline btn-info-outline"
								(click)="startUnvote(p, $event)"
								style="margin-top: 15px; padding:0px 17px !important;">
							Unvote
						</button>
					</div>
					<div class="card-footer proposal-footer">

						<mat-progress-bar
							*ngIf="((p.proposal.json_data.type !== 'options-v1') && (p.proposal.json_data.type !== 'multi-select-v1'))"
							class="proposal-progress"
							color="warn"
							mode="determinate"
							[value]="(p.stats.staked['1'] / p.stats.staked['total']) * 100">
						</mat-progress-bar>

						<div style="padding: 10px 19px; font-weight: 600;">

							<ng-container
								*ngIf="((p.proposal.json_data.type !== 'options-v1') && (p.proposal.json_data.type !== 'multi-select-v1'))">
										<span class="green" tooltipStyleClass="vote-info"
											  pTooltip="Voters: {{p.stats.votes['1']}}&#13;Total: {{(p.stats.staked['1'] / 10000) | number : '1.2-4'}} {{aService.activeChain['symbol']}}">
											{{((p.stats.staked['1'] / p.stats.staked['total']) * 100) | number : '1.1-1'}}
											%
										</span>
								<span class="red" tooltipStyleClass="vote-info"
									  pTooltip="Voters: {{p.stats.votes['0']}}&#13;Total: {{(p.stats.staked['0'] / 10000) | number : '1.2-4'}} {{aService.activeChain['symbol']}}"
									  style="float: right">
											{{((p.stats.staked['0'] / p.stats.staked['total']) * 100) | number : '1.1-1'}}
									%
										</span>
							</ng-container>

							<div class="highlight" [textMask]="{mask: numberMask}">
								{{(p.stats.staked['total'] / 10000) | number : '1.2-4' }} {{aService.activeChain['symbol']}}
								voted
								<span class="card-text-color">
											({{p.stats.votes['total']}} voters)
										</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</ng-container>
		<!--		</div>-->
		<br>
		<div class="clr-col-12 pagination-row text-center">
			<pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
		</div>
		<br>
	</div>
</div>


<clr-modal [(clrModalOpen)]="seeMore" [clrModalStaticBackdrop]="false">

	<h3 class="modal-title highlight">
		{{sMTitle}}<br/>
		<span class="highlight-primary">
			<b>
				#{{sMProposer_name}}
			</b>
		</span>
		proposed by
		<span class="highlight-primary">
			{{sMProposer}}
		</span>
	</h3>

	<div class="modal-body">
		<div class="card-text-color text-justify " (click)="clickEv($event)" [innerHTML]="newContent"></div>
	</div>

	<div class="modal-footer">
		<button
			*ngIf="(!isExpired(sMexpires_at)) && ((sMType !== 'options-v1') && (sMType !== 'multi-select-v1'))"
			type="button" class="btn btn-outline btn-info-outline"
			(click)="startVote(selProposal,0, $event);"
			style="margin-top: 15px; padding:0px 17px !important;">
			0 - No
		</button>
		<button
			*ngIf="(!isExpired(sMexpires_at)) && ((sMType !== 'options-v1') && (sMType !== 'multi-select-v1'))"
			type="button" class="btn btn-outline btn-info-outline"
			(click)="startVote(selProposal,1, $event);"
			style="margin-top: 15px; padding:0px 17px !important;">
			1 - Yes
		</button>
		<button
			*ngIf="(!isExpired(sMexpires_at)) && (sMType==='poll-yna-v1')"
			type="button" class="btn btn-outline btn-info-outline"
			(click)="startVote(selProposal,2, $event);"
			style="margin-top: 15px; padding:0px 17px !important;">
			2 - Abstain
		</button>

		<div
			*ngIf="(!isExpired(sMexpires_at)) && ((sMType==='options-v1') || (sMType==='multi-select-v1'))"
			style="float:left;">
			<mat-form-field class="example-full-width"
							style=" margin-right:10px;width: 207px;">
				<mat-select placeholder="Select an option"
							(selectionChange)="multiSelect(selProposal,$event.value, $event)"
							[multiple]="sMType==='multi-select-v1'">
					<mat-option *ngFor="let option of sMOption"
								[value]="sMOption.indexOf(option)">
						{{sMOption.indexOf(option)}} - {{ option }}
					</mat-option>
				</mat-select>
			</mat-form-field>

			<button type="button" class="btn btn-outline btn-info-outline"
					(click)="startMultiVote(selProposal, $event)"
					style="margin-top: 9px;  padding:0 17px !important;">
				Vote
			</button>
		</div>

		<button *ngIf="!isExpired(sMexpires_at)" type="button"
				class="btn btn-outline btn-info-outline"
				(click)="startUnvote(selProposal, $event)"
				style="margin-top: 15px; padding:0px 17px !important;">
			Unvote
		</button>
	</div>
</clr-modal>

<clr-modal [(clrModalOpen)]="voteModal">

	<h3 *ngIf="selProposal" class="modal-title highlight">
		Confirm vote
		<span class="highlight-primary">
			{{vtProposal}}
		</span>
		<ng-container *ngIf="(
		(selProposal.proposal.json_data.type==='poll-yn-v1') ||
		(selProposal.proposal.json_data.type==='poll-yna-v1') ||
		(selProposal.proposal.json_data.type==='referendum-v1') ||
		(selProposal.proposal.json_data.type==='simple')
		)">
			<span class="highlight-primary" *ngIf="vtProposal === 0">
				 - NO
			</span>
			<span class="highlight-primary" *ngIf="vtProposal === 1">
				 - YES
			</span>
			<span class="highlight-primary" *ngIf="vtProposal === 2">
				 - ABSTAIN
			</span>
		</ng-container>
		to
		<span class="highlight-primary">
			<b>
				{{selProposal.proposal.proposal_name}}
			</b>
		</span>
		proposed by
		<span class="highlight-primary">
			{{selProposal.proposal.proposer}}
		</span>
	</h3>

	<div *ngIf="selProposal" class="modal-body card-text-color">
		Proposal Title
		<h4 class="highlight">
			{{selProposal.proposal.title}}
		</h4>
	</div>

	<div class="modal-footer">
		<form [formGroup]="confirmvoteForm" class="confirmForm">
			<mat-form-field>
				<input matInput type="password" (keyup.enter)="voteProposal()" placeholder="Password"
					   formControlName="pass">
				<mat-hint class="error" align="start" *ngIf="wrongpass !== ''">
					{{wrongpass}}
				</mat-hint>
				<br clear="all"/>
			</mat-form-field>
			<button type="button" class="btn btn-info-outline" style="margin-top: 12px;padding: 5px;"
					(click)="voteProposal()"
					[disabled]="!confirmvoteForm.valid || busy">
				Confirm
				<fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
			</button>

		</form>
	</div>
</clr-modal>

<clr-modal [(clrModalOpen)]="unvoteModal">
	<h3 *ngIf="selProposal" class="modal-title text-white">Confirm unvote to <span
		class="highlight-primary"><b>{{selProposal.proposal.proposal_name}}</b></span> proposal by <span
		class="highlight-primary">{{selProposal.proposal.proposer}}</span>
	</h3>

	<div class="modal-footer">
		<form [formGroup]="confirmunvoteForm" class="confirmForm">
			<mat-form-field>
				<input matInput type="password" (keyup.enter)="unvoteProposal()" placeholder="Password"
					   formControlName="pass">
				<mat-hint class="error" align="start" *ngIf="wrongpass !== ''">
					{{wrongpass}}
				</mat-hint>
				<br clear="all"/>
			</mat-form-field>
			<button type="button" class="btn btn-info-outline" style="margin-top: 12px;padding: 5px;"
					(click)="unvoteProposal()"
					[disabled]="!confirmunvoteForm.valid || busy">
				Confirm
				<fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
			</button>

		</form>
	</div>
</clr-modal>

<clr-modal [(clrModalOpen)]="proposalModal">
	<div class="modal-title">
		<h3 class="highlight">Create <span
			class="highlight-primary">{{createProposalForm.get('title').value}} <b>(#{{createProposalForm.get('id').value}}
			)</b></span> proposal by <span
			class="highlight-primary">{{aService.selected.getValue().name}}</span>
		</h3>
		<h5 class="highlight">
			Expires <span class="highlight-primary">{{getExpiretimeProposal()}}</span>
		</h5>
	</div>


	<div class="modal-footer">
		<form [formGroup]="confirmProposalForm" class="confirmForm">
			<mat-form-field>
				<input matInput type="password" (keyup.enter)="pushProposal()" placeholder="Password"
					   formControlName="pass">
				<mat-hint class="error" align="start" *ngIf="wrongpass !== ''">
					{{wrongpass}}
				</mat-hint>
				<br clear="all"/>
			</mat-form-field>
			<button type="button" class="btn btn-info-outline" style="margin-top: 12px; padding: 5px;"
					(click)="pushProposal()"
					[disabled]="!confirmProposalForm.valid || busy">
				Confirm
				<fa-icon [icon]="['far','spinner']" [spin]="true" *ngIf="busy"></fa-icon>
			</button>

		</form>
	</div>
</clr-modal>
